<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <a class="whitespace-nowrap text-primary-500">User Interface</a>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Page Layouts</a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Overview
                </h2>
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">

        <div class="prose prose-sm max-w-3xl">

            <!-- Introduction -->
            <h2>Introduction</h2>
            <p>
                Page layouts are set of pre-made layouts that can be used as the starter on any page/app design. While they provide some styling by default, it's very minimal
                and can be easily modified from the component you create.
            </p>
            <p>
                Main benefits of using page layouts are;
            </p>
            <ul>
                <li>
                    <p><strong>Consistency</strong></p>
                    Your apps and pages will all look similar in terms of layout and general styling which essentially make them more user friendly and easy
                    to learn.
                </li>
                <li>
                    <p><strong>Easy modifications</strong></p>
                    In the future, if you decide to change the design of your pages, add elements or modify the existing ones, it can be done very easily
                    since all your pages will be sharing same class names and the general code structure.
                </li>
                <li>
                    <p><strong>Easier learning curve for your users</strong></p>
                    Making the general design and layout of your pages similar will make them easier to learn for your users. They
                    won't be looking for a save button or a search field over and over again, trying to find and memorize their locations for each page since all pages will
                    be sharing a similar structure.
                </li>
            </ul>

        </div>

    </div>

</div>
